<template>
  <div class="ele-body">
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item label="车牌号:">
              <a-input v-model:value.trim="where.license" placeholder="输入车牌号" allow-clear />
            </a-form-item>
            <a-form-item label="开始时间:">
              <a-date-picker v-model:value="where.searchBeginTime" type="date" show-time format="YYYY-MM-DD HH:mm:ss"
                             valueFormat="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
            <a-form-item label="结束时间:">
              <a-date-picker v-model:value="where.searchEndTime" type="date" show-time format="YYYY-MM-DD HH:mm:ss"
                             valueFormat="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-row>
        </a-form>
      </a-card>
    </div>

    <div>
      <baidu-map
        ak="OsoBFa0ZqPGS0UpqiiF0rVHsBp0kfQ5F"
        :center="pathCenter"
        :zoom="zoom" style="height: 100vh;">
        <bm-polyline :path="paths"
                     :strokeWeight="3"
                     :strokeOpacity="0"
        > </bm-polyline>
        <bm-control>
          <button @click="reduceZoom()">缩小</button>
          <button @click="resumeZoom(10)">还原</button>
          <button @click="addZoom()">放大</button>
        </bm-control>
      </baidu-map>
    </div>

  </div>
</template>

<script>
import { BaiduMap, BmPolyline, BmControl } from 'vue-baidu-map-3x'
import moment from "moment";
import {VehicleRealtimeSpeedApi} from "@/api/property/vechile/VehicleRealtimeSpeedApi";
import {message} from "ant-design-vue";

export default {
  name: 'VehicleManagerVehicleBmtravel',
  components: {
    BaiduMap,
    BmPolyline,
    BmControl
  },
  data() {
    return {
      where : {},
      paths : [],
      pathCenter : {lng: 116.404, lat: 39.915},
      zoom : 10
    };
  },
  created() {

  },
  methods: {
    resumeZoom (level) {
      this.zoom = level
    },
    addZoom () {
      if (this.zoom < 19) {
        this.zoom = this.zoom + 1;
      }
    },
    reduceZoom () {
      if (this.zoom >= 3) {
        this.zoom = this.zoom - 1;
      }
    },
    reset() {
      this.where.searchBeginTime = '';
      this.where.searchEndTime = '';
      this.where.license = '';
      this.paths = [];
    },

    reload() {
      if (!this.where.searchBeginTime || !this.where.searchEndTime || !this.where.license) {
        message.warning('请输入车牌号和选择时间');
        return;
      }
      this.getPositoinTravelData();
    },
    getPositoinTravelData() {
      let that = this;
      let params = {
        searchBeginTime : moment().subtract(1, 'h').format('YYYY-MM-DD HH:mm:ss'),
        searchEndTime : moment().format('YYYY-MM-DD HH:mm:ss'),
        license: this.where.license,
        orderBy : "sendtime",
        sortBy : "asc"
      };
      if (this.where.searchBeginTime && this.where.searchEndTime) {
        params.searchBeginTime = this.where.searchBeginTime;
        params.searchEndTime = this.where.searchEndTime;
      }
      VehicleRealtimeSpeedApi.travelList(params).then(res => {
        let _paths = [];
        if (res.data && res.data.length > 0) {
          res.data.forEach(function (item, index) {
            if (item.gnssAccuracy == 1) {
              let formatItem = {
                lng: item.bdLongitude,
                lat: item.bdLatitude
              }
              if (index == 0) {
                that.pathCenter = formatItem;
              }
              _paths.push(formatItem);
            }
          });
        }
        that.paths = _paths;
        console.log( that.paths);
      });
    }
  }
};
</script>
